import React, { Component } from 'react'
import '../css/redio.scss'
export default class ComboBox extends Component {
    constructor(props) {
        super(props)
        this.state = {
            text: '默认选项',
            show: false,
            checkedIndex:0,
        }
    }
    componentDidMount(){
        this.setState({
            text:this.props.text 

        })
    }
    checked = (index,item) => {
        console.log(index,item);
        this.setState({
            checkedIndex: index,
            text :item,
            show:false,
        })
        this.props.Checked(index,item)
    }
    shows = () => {
        this.setState({
            show: !this.state.show,
        })
    }
    render() {
        const { text, show } = this.state
        return (
            <div className='combobox'>
                <div style={{ marginLeft: 30, padding: 10, border: '1px black solid', width: 100, textAlign: 'center', }}>{text}</div>

                <span style={{ display: (!show ? 'block' : 'none') }} onClick={this.shows}>👇</span><span onClick={this.shows} style={{ display: (show ? 'block' : 'none') }}> 👆</span>

                {
                    this.props.data.map((item, index) => {
                        return (
                            <div key={index} className={this.state.checkedIndex === index?'item2':'item'}  onClick={this.checked.bind(this, index,item)} style={{ display: (show ? 'block' : 'none') }}>{item}</div>
                        )
                    })
                }
            </div>
        )
    }
}
